<template>
  <div class="planed">
    <el-card>
      <el-row>
        <el-col :span="20">
          <el-form :model="form" ref="formRef" inline>
            <el-form-item label="">
              <el-select v-model="form.num" placeholder="">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="form.num" placeholder="">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="form.num" placeholder="">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-date-picker
                v-model="form.value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="resourceAllocationVisible = true"
            >资源配置</el-button
          >
          <el-button
            type="primary"
            @click="$router.push({ name: 'weeklyPlanDirectorFactoryCalendar' })"
            >工作日历设置</el-button
          >
        </el-col>
      </el-row>
      <div class="steps">
        <div class="step-list" v-for="(item, index) in 7" :key="index">
          <div class="step-name" :class="'primary'">验布机验表工序</div>
          <i class="step-icon" :class="'icon-primary'"></i>
          <div class="step-num">产能负荷率 20%</div>
        </div>
      </div>
      <div class="border-card">
        <div>
          <span>建议排产量</span>
          <h3 class="primary">1000000</h3>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div>
          <span>瓶颈工序</span>
          <h3 class="warning">上拉链工序</h3>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div>
          <span>产能溢出</span>
          <h3 class="danger">0</h3>
        </div>
      </div>
    </el-card>
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待排订单" name="1">
          <el-row>
            <el-col :span="24">
              <el-input
                placeholder="输入订单号、产品名称、客户名称等关键词进行查找"
                v-model="searchName"
                class="input-with-select"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="已排订单" name="2">
          <el-input
            placeholder="输入订单号、产品名称、客户名称等关键词进行查找"
            v-model="searchName"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-row class="select-rows">
      <el-col
        :span="24"
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <div v-if="activeName == 1">
          <span class="select">已选1项</span>
          <el-button type="primary" plain size="small"> 全部排产 </el-button>
          <el-button
            type="primary"
            plain
            size="small"
            @click="schedulingConfirmationVisible = true"
          >
            排产确认
          </el-button>
        </div>
        <div v-if="activeName != 1">
          <span class="select">已选1项</span>
          <el-button
            type="primary"
            plain
            size="small"
            @click="cancelScheduleVisible = true"
          >
            取消排产
          </el-button>
        </div>
        <div v-if="activeName != 1">
          <el-button
            type="primary"
            plain
            size="small"
            @click="InsertOrderVisible = true"
          >
            插单
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-card>
      <second-table-list
        :total="total"
        :pageSize="page.pageSize"
        :current="page.page"
        @changePage="changePage"
        v-if="activeName == 1"
      >
        <my-table
          slot="table"
          :columns="columns"
          :data="tdata"
          :showSelection="true"
          @selectChange="selectChange"
          :showColumnSetting="false"
        >
          <template v-slot:batchDemand="{ row }"></template>
          <template v-slot:batchIndex="{ row }"></template>
          <template v-slot:batchDelivery="{ row }"></template>
          <template v-slot:batchPlanOnlineTime="{ row }"></template>
          <template v-slot:batchOutput="{ row }"></template>
          <template v-slot:bottleneckProcess="{ row }"></template>
          <template v-slot:circulationQuantity="{ row }"></template>
        </my-table>
      </second-table-list>
      <div v-if="activeName != 1">
        <second-table-list
          :total="total"
          :pageSize="page.pageSize"
          :current="page.page"
          @changePage="changePage"
        >
          <my-table
            slot="table"
            :columns="columns1"
            :data="tdata"
            :showSelection="true"
            @selectChange="selectChange"
            :showColumnSetting="false"
          >
            <template v-slot:overflow="{ row }"></template>
            <template v-slot:overtimeRequired="{ row }"></template>
          </my-table>
        </second-table-list>
      </div>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span class="capacity">工序产能负荷图</span>
        <div style="flex: 1; text-align: right">
          <el-form
            class="capacityForm"
            :model="capacityForm"
            inline
            size="small"
          >
            <el-form-item label="">
              <el-select v-model="capacityForm.address" placeholder="">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="capacityForm.address" placeholder="">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-date-picker
                v-model="capacityForm.time"
                type="year"
                placeholder="选择年"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="">
              <el-radio-group v-model="radio1">
                <el-radio-button label="1">按月</el-radio-button>
                <el-radio-button label="2">按年</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <capacity-load></capacity-load>
    </el-card>
    <!-- 排产确认 -->
    <el-dialog
      title="排产确认"
      :visible.sync="schedulingConfirmationVisible"
      width="40%"
    >
      <div class="item">
        BZ210104001 订单 第一批 排产完成，可在已排订单列表查看
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onOK(0)">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 取消排产 -->
    <el-dialog
      title="取消排产"
      :visible.sync="cancelScheduleVisible"
      width="40%"
    >
      <div class="item danger">BZ210104001 订单 第一批 取消排产</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onClose(2)">取 消</el-button>
        <el-button type="primary" @click="onOK(2)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 插单 -->
    <el-dialog title="插单" :visible.sync="InsertOrderVisible" width="40%">
      <el-form :model="InsertOrderForm" ref="InsertOrderFormRef" inline>
        <el-form-item label="计划上线日期">
          <el-date-picker
            v-model="InsertOrderForm.time"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="计划下线日期">
          <el-date-picker
            v-model="InsertOrderForm.time"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="空余产能(标品)/件">
          <el-input v-model="InsertOrderForm.prodNum"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary">自动计算</el-button>
        </el-form-item>
      </el-form>
      <my-table
        :columns="InsertOrderColumns"
        :data="InsertOrderData"
        :showSelection="true"
        @selectChange="InsertOrderSelectChange"
      >
        <template v-slot:inputQuantity="{ row }"> </template>
      </my-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onClose(3)">取 消</el-button>
        <el-button type="primary" @click="onOK(3)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 资源配置 -->
    <el-dialog
      title="资源配置"
      :visible.sync="resourceAllocationVisible"
      width="40%"
    >
      <my-table
        :columns="resourceAllocationColumns"
        :data="resourceAllocationData"
        :showSelection="true"
        @selectChange="resourceAllocationSelectChange"
      >
        <template v-slot:demand="{ row }"> </template>
      </my-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onClose(4)">取 消</el-button>
        <el-button type="primary" @click="onOK(4)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <el-dialog
      title="资源配置"
      :visible.sync="resourceAllocationVisible"
      width="40%"
    >
    </el-dialog> -->
  </div>
</template>

<script>
import secondTableList from "@/components/table/secondTableList.vue";
import myTable from "@/components/table/myTable.vue";
import capacityLoad from "@/components/Charts/monthCapacityLoad";
export default {
  components: { myTable, secondTableList, capacityLoad },
  data() {
    return {
      form: {},
      activeName: "1",
      searchForm: {},
      total: 0,
      page: {
        page: 1,
        pageSize: 10,
      },
      columns: [
        {
          label: "排产流水号",
          prop: "num",
          fixed: true,
        },
        {
          label: "优先级",
          prop: "name",
          fixed: true,
        },
        {
          label: "订单编号",
          prop: "name",
        },
        {
          label: "外协合同号",
          prop: "num",
        },
        {
          label: "订单需求量",
          prop: "num",
        },
        {
          label: "批次需求量",
          prop: "batchDemand",
          slot: "batchDemand",
        },
        {
          label: "批次序号",
          prop: "batchIndex",
          slot: "batchIndex",
        },
        {
          label: "批次交期",
          prop: "batchDelivery",
          slot: "batchDelivery",
        },
        {
          label: "批次计划上线时间",
          prop: "batchPlanOnlineTime",
          slot: "batchPlanOnlineTime",
        },
        {
          label: "批次可生产时间(h)",
          prop: "num",
        },
        {
          label: "本厂可产量",
          prop: "name",
        },
        {
          label: "建议排产量",
          prop: "num",
        },
        {
          label: "产品大类",
          prop: "num",
        },
        {
          label: "产品信息",
          prop: "name",
        },
        {
          label: "最晚下线时间",
          prop: "num",
        },
        {
          label: "待排产量",
          prop: "num",
          fixed: "right",
        },
        {
          label: "批次溢出量",
          prop: "name",
          fixed: "right",
        },
        {
          label: "需加班时间(h)",
          prop: "num",
          fixed: "right",
        },
        {
          label: "瓶颈工序",
          prop: "bottleneckProcess",
          slot: "bottleneckProcess",
          fixed: "right",
        },
        {
          label: "批次排产量",
          prop: "batchOutput",
          slot: "batchOutput",
          fixed: "right",
        },
        {
          label: "流转数量(件)",
          prop: "circulationQuantity",
          slot: "circulationQuantity",
          fixed: "right",
        },
      ],
      columns1: [
        {
          label: "排产流水号",
          prop: "num",
          fixed: true,
        },
        {
          label: "优先级",
          prop: "name",
          fixed: true,
        },
        {
          label: "订单编号",
          prop: "name",
        },
        {
          label: "外协合同号",
          prop: "num",
        },
        {
          label: "产品大类",
          prop: "num",
        },
        {
          label: "批次",
          prop: "batchDemand",
        },
        {
          label: "订单需求量",
          prop: "batchIndex",
        },
        {
          label: "批次需求量",
          prop: "batchDelivery",
        },
        {
          label: "批次交期",
          prop: "batchPlanOnlineTime",
          sortable: true,
        },
        {
          label: "批次上线时间",
          prop: "num",
          sortable: true,
        },
        {
          label: "最早下线时间",
          prop: "name",
          sortable: true,
        },
        {
          label: "最晚下线时间",
          prop: "num",
          sortable: true,
        },
        {
          label: "可生产时间(h)",
          prop: "num",
        },
        {
          label: "加班时间(h)",
          prop: "name",
        },
        {
          label: "瓶颈工序",
          prop: "num",
        },
        {
          label: "本厂可产量",
          prop: "num",
        },
        {
          label: "实际排产",
          prop: "name",
        },
        {
          label: "流转数量(件)",
          prop: "num",
        },
        {
          label: "流转次数(次)",
          prop: "bottleneckProcess",
        },
        {
          label: "单次流转制成时间",
          prop: "batchOutput",
        },
        {
          label: "订单制成周期(s)",
          prop: "circulationQuantity",
        },
        {
          label: "订单制成天数",
          prop: "circulationQuantity",
        },
        {
          label: "溢出量",
          prop: "overflow",
          slot: "overflow",
          fixed: "right",
        },
        {
          label: "需加班时间(h)",
          prop: "overtimeRequired",
          slot: "overtimeRequired",
          fixed: "right",
        },
        {
          label: "操作",
          prop: "action",
          slot: "aciton",
          fixed: "right",
        },
      ],
      tdata: [],
      selectChangeList: [],
      radio1: "1",
      capacityForm: {},
      searchName: "",
      //   排产确认
      schedulingConfirmationVisible: false,
      schedulingConfirmationList: [],
      cancelScheduleVisible: false,
      cancelScheduleList: [],
      InsertOrderVisible: false,
      InsertOrderForm: {},
      InsertOrderColumns: [
        {
          label: "排序流水号",
          prop: "orderNumber",
        },
        {
          label: "优先级",
          prop: "priority",
        },
        {
          label: "订单编号",
          prop: "orderNumber",
        },
        {
          label: "外协合同号",
          prop: "outboundComNumber",
        },
        {
          label: "批次序号",
          prop: "batchNumber",
        },
        {
          label: "产品大类",
          prop: "product",
        },
        {
          label: "产品信息",
          prop: "productDescription",
        },
        {
          label: "批次需求量",
          prop: "quantity",
        },
        {
          label: "批次上线时间",
          prop: "pumpTime",
        },
        {
          label: "剩余待排产量",
          prop: "remainingQuantity",
        },
        {
          label: "输入排产量",
          prop: "inputQuantity",
          slot: "inputQuantity",
        },
        {
          label: "空余产能剩余量",
          prop: "residualQuantity",
        },
      ],
      InsertOrderData: [],
      InsertOrderSelectChangeList: [],
      resourceAllocationVisible: false,
      resourceAllocationColumns: [
        {
          label: "工序",
          prop: "workOrder",
        },
        {
          label: "资源名称",
          prop: "resName",
        },
        {
          label: "资源数量",
          prop: "quantity",
        },
        {
          label: "剩余可用资源数量",
          prop: "resRemaining",
        },
        {
          label: "单人单机下工时(s/件)",
          prop: "transferTime",
        },
        {
          label: "投入资源数量",
          prop: "demand",
          slot: "demand",
        },
        {
          label: "本厂可产量(件)",
          prop: "supply",
        },
        {
          label: "外协可产量(件)",
          prop: "outboundSupply",
        },
        {
          label: "可排产量(件)",
          prop: "resAllowed",
        },
      ],
      resourceAllocationData: [],
      resourceAllocationSelectChangeList: [],
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleClick(val) {},
    changePage(val) {
      this.page = val;
    },
    selectChange(val) {
      this.selectChangeList = val;
    },
    InsertOrderSelectChange(val) {
      this.InsertOrderSelectChangeList = val;
    },
    resourceAllocationSelectChange(val) {
      this.resourceAllocationSelectChange = val;
    },
    onClose(val) {
      if (val == 2) {
        this.cancelScheduleVisible = false;
      } else if (val == 3) {
        this.InsertOrderVisible = false;
      } else if (val == 4) {
        this.resourceAllocationVisible = false;
      }
    },
    onOK(val) {
      if (val == 0) {
        this.schedulingConfirmationVisible = false;
      } else if (val == 2) {
        this.cancelScheduleVisible = false;
      } else if (val == 3) {
        this.InsertOrderVisible = false;
      } else if (val == 4) {
        this.resourceAllocationVisible = false;
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/styles/element-variables.scss";
.el-card {
  margin-bottom: 20px;
}
.primary {
  color: $--color-primary;
}
.warning {
  color: $--color-warning;
}
.danger {
  color: $--color-danger;
}
.steps {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0 0;

  .step-list {
    position: relative;
    display: flex;
    flex-direction: column;
    //   flex-wrap: wrap;
    width: calc(100% / 8);
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;

    .step-name {
      width: 152px;
      background: #ffffff;
      border: 1px solid #1b84ed;
      border-radius: 13px;
      padding: 5px 12px 5px 13px;
      text-align: center;
    }
    .step-icon {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin: 15px 0;
      &::before {
        content: "";
        position: absolute;
        top: 52%;
        right: -49%;
        transform: translateY(-50%);
        width: 100%;
        height: 2px;
        background: $--color-primary;
      }
    }
    &:last-child,
    &:nth-child(8) {
      .step-icon {
        &::before {
          display: none;
        }
      }
    }
    .step-num {
      width: 100%;
      text-align: center;
      font-size: 16px;
      font-family: SourceHanSansCN;
      font-weight: 400;
      color: #666666;
      line-height: 26px;
    }
    .icon-primary {
      background-color: $--color-primary;
    }
    .icon-warning {
      background-color: $--color-warning;
    }
    .icon-danger {
      background-color: $--color-danger;
    }
  }
}

.border-card {
  width: 100%;
  height: 88px;
  box-shadow: 0px 6px 12px 0px rgba(16, 32, 58, 0.08);
  border-radius: 4px;
  border: 1px solid $--color-primary;
  display: flex;
  align-items: center;
  justify-content: space-around;
  div {
    display: flex;
    align-items: center;
  }
  h3 {
    margin: unset;
    display: inline-block;
    font-size: 32px;
  }
  span {
    color: #8fa1c9;
    margin-right: 10px;
    font-size: 16px;
  }
  .el-divider {
    background-color: $--color-primary;
    height: 36px;
  }
}
.select-rows {
  margin-bottom: 20px;
  .select {
    margin-right: 15px;
  }
}
.clearfix {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .capacity {
    font-weight: 800;
    color: #171f31;
    font-size: 20px;
  }
}
.capacityForm {
  .el-form-item {
    margin-bottom: unset;
  }
}
</style>
